<template>
  <div class="attibute-demo">
    <h3>------------------</h3>
    <h3>属性绑定</h3>
    <div v-bind:class="classMsg" v-bind:id="idMsg">Bind Test</div>
    <button :disabled="isButtonDisabled">我是按钮</button>
    <div v-bind="objectOfAttrs">自定义属性</div>
  </div>
</template>

<script>
export default {
  name: "AttibuteBind",
  data() {
    return {
      classMsg: "active",
      idMsg: "idContent",
      isButtonDisabled: true,
      objectOfAttrs: {
        id: "appId",
        class: "appClass",
      },
    };
  },
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.active {
  font: 800 18px/40px "微软雅黑";
}
</style>
